<div class="row">
  <div class="col-xxxl-8">
    <div class="row">
      <div class="col-md-6 col-xxl-7">
        <nb-card size="medium">
          <nb-card-header>
            Used Fonts
          </nb-card-header>
          <nb-card-body>
            <div class="font-row font-secondary">
              <div class="header">
                <div class="name bold">Exo</div>

                <div class="variants">
                  <span class="font-w-bold">Bold</span>
                  <span class="font-w-regular">Regular</span>
                  <span class="font-w-light">Light</span>
                </div>
              </div>
              <p>
                Far far away, behind the word mountains, far from the countries Vokalia and Consonantia,
                there live the blind texts.
                Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.
              </p>
            </div>

            <div class="font-row font-main">
              <div class="header">
                <div class="name bold">Roboto</div>

                <div class="variants">
                  <span class="font-w-bold">Bold</span>
                  <span class="font-w-regular">Regular</span>
                  <span class="font-w-light">Light</span>
                </div>
              </div>
              <p>
                Far far away, behind the word mountains, far from the countries Vokalia and Consonantia,
                there live the blind texts.
                Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.
              </p>
            </div>
          </nb-card-body>
        </nb-card>

        <nb-card size="small">
          <nb-card-header>
            Article Example
          </nb-card-header>
          <nb-card-body>
            <h4>So what's About the grammar?</h4>
            <p class="text-indent">
              Far far away, behind the word mountains, far from the countries <strong>Vokalia</strong> and <strong>Consonantia</strong>,
              there live the blind texts.
              They live in <strong>Bookmarksgrove</strong>.
            </p>
            <p class="text-indent">
              A small <strong>river named Duden</strong> flows by their place and supplies it with the
              necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly
              into your mouth.
              Even the all-powerful Pointing has no control about the blind texts it is an almost
              unorthographic life One day however a small
              line of blind text by the name of
              <a href="http://google.com" target="_blank">Lorem Ipsum</a> decided to leave for
              the far <strong>World of Grammar</strong>.
            </p>
          </nb-card-body>
        </nb-card>
      </div>
      <div class="col-md-6 col-xxl-5">
        <nb-card size="medium" class="headings-card">
          <nb-card-header>
            Headings
          </nb-card-header>
          <nb-card-body>
            <div class="header">
              <div>
                <h1>H1. Heading</h1>
              </div>

              <div class="detail font-w-light">
                Demibold 2.5rem (40px)
              </div>
            </div>
            <div class="header">
              <div>
                <h2>H2. Heading</h2>
              </div>

              <div class="detail font-w-light">
                Demibold 2rem (32px)
              </div>
            </div>
            <div class="header">
              <div>
                <h3>H3. Heading</h3>
              </div>

              <div class="detail font-w-light">
                Demibold 1.75rem (28px)
              </div>
            </div>
            <div class="header">
              <div>
                <h4>H4. Heading</h4>
              </div>

              <div class="detail font-w-light">
                Demibold 1.5rem (24px)
              </div>
            </div>
            <div class="header">
              <div>
                <h5>H5. Heading</h5>
              </div>

              <div class="detail font-w-light">
                Demibold 1.25rem (20px)
              </div>
            </div>
            <div class="header">
              <div>
                <h6>H6. Heading</h6>
              </div>

              <div class="detail font-w-light">
                Demibold 1rem (16px)
              </div>
            </div>
          </nb-card-body>
        </nb-card>

        <nb-card size="small">
          <nb-card-header>
            Blockquotes
          </nb-card-header>
          <nb-card-body>
            <blockquote class="blockquote">
              <p class="mb-0">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia.
            </blockquote>
            <blockquote class="blockquote">
              <p class="mb-0">Far far away, behind the word mountains, far from the countries.</p>
              <footer class="blockquote-footer">Vladimir Lugovsky</footer>
            </blockquote>
            <blockquote class="blockquote-reverse">
              <p class="mb-0">Far far away, behind the word mountains.</p>
              <footer class="blockquote-footer">Vladimir Lugovsky</footer>
            </blockquote>
          </nb-card-body>
        </nb-card>
      </div>
    </div>
  </div>

  <div class="col-md-6 col-xxxl-4">
    <nb-card [size]="breakpoint.width >= breakpoints.xxxl ? 'xxlarge' : 'large'">
      <nb-card-header>
        Font Colors
      </nb-card-header>
      <nb-card-body>
        <div class="colors">
          <div class="item text-heading">
            <div class="color bg-heading"></div>
            <div>
              <h5 class="text-heading">Heading Text</h5>
              Far far away, behind the your awesomeness.
            </div>
          </div>
          <div class="item text-body">
            <div class="color bg-body"></div>
            <div>
              <h5 class="text-body">Body Text</h5>
              Far far away, behind the your awesomeness.
            </div>
          </div>
          <div class="item text-hint">
            <div class="color bg-hint"></div>
            <div>
              <h5 class="text-hint">Hint Text</h5>
              Far far away, behind the your awesomeness.
            </div>
          </div>
          <div class="item text-link">
            <div class="color bg-link"></div>
            <div>
              <h5 class="text-link">Link Text</h5>
              Far far away, behind the your awesomeness.
            </div>
          </div>
          <div class="item text-primary">
            <div class="color bg-primary"></div>
            <div>
              <h5 class="text-primary">Primary Text</h5>
              Far far away, behind the your awesomeness.
            </div>
          </div>
          <div class="item text-success">
            <div class="color bg-success"></div>
            <div>
              <h5 class="text-success">Success Text</h5>
              Far far away, behind the your awesomeness.
            </div>
          </div>
          <div class="item text-info">
            <div class="color bg-info"></div>
            <div>
              <h5 class="text-info">Info Text</h5>
              Far far away, behind the your awesomeness.
            </div>
          </div>
          <div class="item text-warning">
            <div class="color bg-warning"></div>
            <div>
              <h5 class="text-warning">Warning Text</h5>
              Far far away, behind the your awesomeness.
            </div>
          </div>
          <div class="item text-danger">
            <div class="color bg-danger"></div>
            <div>
              <h5 class="text-danger">Danger Text</h5>
              Far far away, behind the your awesomeness.
            </div>
          </div>
        </div>
      </nb-card-body>
    </nb-card>
  </div>

  <div class="col-md-6 col-xxxl-4">
    <nb-card size="large">
      <nb-card-header>
        Alerts
      </nb-card-header>
      <nb-card-body>
        <div class="alert alert-primary" role="alert">
          <strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
        </div>
        <div class="alert alert-hint" role="alert">
          <strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your attention</a>, but it's not super important.
        </div>
        <div class="alert alert-success" role="alert">
          <strong>Well done!</strong> You successfully read <a href="#" class="alert-link">this important alert message</a>.
        </div>
        <div class="alert alert-info" role="alert">
          <strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your attention</a>, but it's not super important.
        </div>
        <div class="alert alert-warning" role="alert">
          <strong>Warning!</strong> Better check yourself, you're <a href="#" class="alert-link">not looking too good</a>.
        </div>
        <div class="alert alert-danger" role="alert">
          <strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
        </div>
      </nb-card-body>
    </nb-card>
  </div>

  <div class="col-md-6 col-xxxl-4">
    <nb-card size="large">
      <nb-card-header>
        Text Types
      </nb-card-header>
      <nb-card-body>
        <h4>Highlighted text</h4>
        <p class="mb-5">
          Far far away, behind the word mountains, far from the countries
          Vokalia and <mark>Consonantia, there live the blind texts.</mark>
        </p>
        <h4>Bold Text</h4>
        <p class="mb-5">
          Far far away, behind the word mountains, far from the countries
          Vokalia and <strong>Consonantia, there live the blind texts.</strong>
        </p>
        <h4>Link Text</h4>
        <p class="mb-5">
          Far far away, behind the word mountains, far from the countries
          Vokalia and <a href="http://google.com" target="_blank">Consonantia, there live the blind texts.</a>
        </p>
      </nb-card-body>
    </nb-card>
  </div>

  <div class="col-md-6 col-xxxl-4">
    <nb-card size="large">
      <nb-card-header>
        Lists
      </nb-card-header>
      <nb-card-body>
        <h4>Ordered List</h4>
        <ol class="mb-5">
          <li>Far far away, behind the word mountains</li>
          <li>Far from the countries Vokalia and Consonantia</li>
          <li>There live the blind texts.</li>
          <li>Right at the coast of the Semantics.</li>
          <li>A small river named Duden flows</li>
        </ol>

        <h4>Unordered List</h4>
        <ul class="mb-5">
          <li>Far far away, behind the word mountains</li>
          <li>Far from the countries Vokalia and Consonantia</li>
          <li>There live the blind texts.</li>
          <li>Right at the coast of the Semantics.</li>
          <li>A small river named Duden flows</li>
        </ul>
      </nb-card-body>
    </nb-card>
  </div>
</div>
